<template>
<div>
  <van-list v-model="loading" :finished="finished" finished-text="我是有底的!" @load="onLoad" :immediate-check="false">
    <van-cell v-for="data in premieList" :key="data.filmId">
      <home-item :data="data">
        <div>预购</div>
      </home-item>
    </van-cell>
  </van-list>
  <div style="height: 5rem;"></div>
</div>
</template>

<script>
import http from '@/util/http'
import HomeItem from '@/components/homes/HomeItem'
import { mapState } from 'vuex'
export default {
  components: {
    HomeItem
  },
  data () {
    return {
      premieList:[],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    }
  },
  computed:{
    ...mapState(['cityId','cityName'])
  },
  mounted () {
    if(this.premieList.length === 0){
      http({
        url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=2&k=3515017`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res.data.data.films)
        console.log(this.cityName);
        this.total = res.data.data.total
        this.premieList = res.data.data.films
      })
    }
  },
  methods: {
    onLoad () {
      if (this.premieList.length === this.total && this.total !== 0) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.current++
        http({
          url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=661500`,
          headers: {
            'X-Host': 'mall.film-ticket.film.list'
          }
        }).then(res => {
          // console.log(res.data.data.films)
          this.premieList = [...this.premieList,...res.data.data.films]
          // 每次更新完成之后，主动将loading设置成false
          this.loading = false
        })
      },500)
    }
  }
}
</script>
